<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRoute } from 'vue-router'

import { timeFormat, timeFormat_2, toYuan, copyToCliboard, getNowDay } from '@/hooks/util'

import { message } from 'ant-design-vue'
import orderModal from './component/orderModal.vue'
import ImgView from './component/imgView.vue'
import Channel from './component/channel.vue'

import * as orderApi from '@/api/order'
import * as accountApi from '@/api/account'
import SearchDrawer from '@/components/search-drawer/Index.vue'

const searchDrawerRef = ref()

const route = useRoute()

let searchFlag = ref<boolean>(false)

interface Pagination {
  page: number
  pageSize: number
  total: number
  current?: number
  onChange: Function
  showSizeChanger: boolean
  showQuickJumper: boolean
}

const handlePageChange = (page: any, pageSize: any) => {
  // console.log(page, pageSize)
  pagination.value.pageSize = pageSize
  searchParams.value.pageSize = pageSize
}

const pagination = ref<Pagination>({
  page: 1,
  pageSize: 10,
  total: 0,
  onChange: handlePageChange,
  showSizeChanger: true,
  showQuickJumper: true,
})
let loading = ref<boolean>(false)

interface SearchParams {
  currentPage: number
  pageSize: number
  [propName: string]: any
  time?: [any, any]
}
const searchParams = ref<SearchParams>({
  currentPage: pagination.value.page,
  pageSize: pagination.value.pageSize,
})

const dataSource = ref([])
const columns = [
  {
    title: '渠道信息',
    key: 'channelData',
    width: 500,
  },
  {
    title: '推广平台',
    key: 'planetForm',
    width: 300,
  },
  {
    title: '影院信息',
    key: 'cinemaInfo',
    width: 400,
  },
  {
    title: '电影信息',
    key: 'filmName',
    width: 400,
  },
  {
    title: '订单状态',
    key: 'orderStatus',
    width: 300,
  },
  {
    title: '报价信息',
    key: 'finalPrice',
    width: 300,
  },
  {
    title: '结算信息',
    key: 'finalInformPrice',
    width: 300,
  },
  {
    title: '时间信息',
    key: 'createTime',
    width: 300,
  },
  {
    title: '操作',
    key: 'action',
    width: 200,
    align: 'center',
    fixed: 'right',
  },
]

// 翻页
const changePage = (e: any) => {
  pagination.value.current = e.current
  pagination.value.pageSize = e.pageSize
  searchParams.value.currentPage = pagination.value.current as number
  getList()
}

// 获取当前列表
const getList = async () => {
  loading.value = true
  try {
    let { state, data, message: msg } = await orderApi.filmOrderList(searchParams.value)
    if (state === 200) {
      dataSource.value = data.list
      pagination.value.total = Number(data.totalCount)
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络请求连接失败~')
  }
  loading.value = false
}

// 翻译渠道
const getChannel = (num: string | number) => {
  if (num == 1) {
    return '微信'
  } else if (num == 2) {
    return '企业微信'
  } else if (num == 3) {
    return '闲鱼'
  }
}

onMounted(() => getList())

import type { SelectProps } from 'ant-design-vue'
const orderStatusList = ref<SelectProps['options']>([
  {
    label: '已创建',
    value: 1,
  },
  {
    label: '已提交',
    value: 2,
  },
  {
    label: '出票中',
    value: 3,
  },
  {
    label: '出票成功',
    value: 10,
  },
  {
    label: '已结算',
    value: 15,
  },
  {
    label: '出票失败',
    value: 20,
  },
  {
    label: '订单售后',
    value: 25,
  },
])

const channelList = ref<SelectProps['options']>([
  {
    label: '微信',
    value: 1,
  },
  {
    label: '企业微信',
    value: 2,
  },
  {
    label: '闲鱼',
    value: 3,
  },
])

const profitStateList = ref<SelectProps['options']>([
  {
    label: '无利润',
    value: 0,
  },
  {
    label: '负利润 ',
    value: -1,
  },
  {
    label: '正利润',
    value: 1,
  },
])

const formRef = ref()
interface FormState {
  cinemaName?: string
  fansId?: string
  orderStatus?: string
  channel?: string
  profitState?: string
  upstreamOrderNumber?: string
  orderNumber?: string
  [propName: string]: any
}
const formState = reactive<FormState>({})

// ---------------------------------------------------------------------------------------

const open = ref(false) // 支付出票 - 弹窗

const checked = ref(true) // 限价的选中状态
const disabled = ref(false) // 是否禁用限价

const confirmLoading = ref(false) //加载中

// 渠道
const chanelList = ref([
  {
    id: 88,
    name: '芒果电影票',
    icon: 'http://h5.liangpiao.net.cn/logo/1.jpg',
    desc: '预估限价',
    isSupport: 1,
    selectNum: 1,
    time: 0,
    text: '支持限价，你的出票成本=供应商中标价+供应商中标价*3%，手续费为供应渠道收取，良票平台不收取任何订单手续费',
    isCan: 0,
  },
  {
    id: 66,
    name: '芒果一口价',
    icon: 'http://h5.liangpiao.net.cn/logo/1.jpg',
    desc: '一口价',
    isSupport: 0,
    selectNum: 0,
    time: 0,
    text: '你的出票成本=预估出票价',
    isCan: 0,
  },
  // //渠道
  // {
  //   id: 5,
  //   name: '芒果电影票（一口价）',
  //   icon: 'http://h5.liangpiao.net.cn/logo/1.jpg',
  //   text: '出票成本=预估出票价',
  //   isSupport: 0,
  //   selectNum: 1,
  //   desc: '出票成本',
  //   isCan: 0,
  // },
  {
    id: 3,
    name: '麻花电影票（可限价）',
    icon: 'http://h5.liangpiao.net.cn/logo/maHua.jpg',
    text: '支持限价，你的出票成本=供应商中标价+供应商中标价*3%，手续费为供应渠道收取，票达人平台不收取任何订单手续费',
    isSupport: 1,
    selectNum: 0, // 1：主，2：备
    desc: '预估出票价',
    isCan: 0,
  },
  {
    id: 11,
    name: '守兔电影票（一口价）',
    icon: 'http://h5.liangpiao.net.cn/logo/2.jpg',
    text: '你的出票成本=预估出票价',
    isSupport: 0,
    selectNum: 0, // 选中的备渠道
    desc: '出票成本',
    isCan: 0,
  },
  {
    id: 7,
    name: '守兔电影票（可限价）',
    icon: 'http://h5.liangpiao.net.cn/logo/2.jpg',
    text: '支持限价，你的出票成本=供应商中标价+供应商中标价*3%，手续费为供应渠道收取，票达人平台不收取任何订单手续费',
    isSupport: 1,
    selectNum: 0,
    desc: '预估出票价',
    isCan: 0,
  },
  {
    id: 10,
    name: '影划算电影票（可限价）',
    icon: 'http://h5.liangpiao.net.cn/logo/ying.png',
    text: '支持限价，你的出票成本=供应商中标价+供应商中标价*3%，手续费为供应渠道收取，票达人平台不收取任何订单手续费',
    isSupport: 1,
    selectNum: 0,
    desc: '预估出票价',
    isCan: 0,
  },
  {
    id: 8,
    name: '星驰电影票（一口价）',
    icon: 'http://h5.liangpiao.net.cn/logo/xingChi.jpg',
    text: '你的出票成本=预估出票价',
    isSupport: 1,
    selectNum: 0,
    desc: '出票成本',
    isCan: 1,
  },
  {
    id: 6,
    name: '哈哈电影票',
    icon: 'http://h5.liangpiao.net.cn/logo/3.jpg',
    text: '不支持限价，你的出票成本=供应商中标价+原价*3%，手续费为供应渠道收取，票达人平台不收取任何订单手续费',
    isSupport: 0,
    selectNum: 0,
    desc: '预估出票价',
    isCan: 1,
  },
  {
    id: 9,
    name: '哈哈电影快票（固定9折）',
    icon: 'http://h5.liangpiao.net.cn/logo/3.jpg',
    text: '你的出票成本=猫淘价（原价）*90%',
    isSupport: 0,
    selectNum: 0,
    desc: '出票成本',
    isCan: 1,
  },
])

// 当前选中的渠道
const selectedChannelList = ref([])

let limitPriceSwitchFlag = ref(false)

// 弹框取消操作
const cancel = () => {
  open.value = false
}

const itemInfo = ref({}) // 点击支付出票，数据

// 打开，支付出票的弹框
const getDraw = (item: any) => {
  itemInfo.value = item
  selectedChannelList.value = [] // 每次都变成空数组

  open.value = true // 打开，支付出票的弹框

  PerformLoop(item.id)
}

// 循环调用获取 当前预报价的接口
const PerformLoop = async (id: any) => {
  for (const role of chanelList.value) {
    if (role.id != 7) {
      await performTask(role, id)
    }
  }
}

// 获取预报价的接口
const performTask = async (item: any, id: any) => {
  try {
    const result = await accountApi.getChaYu({ taskId: id, ticketChannel: item.id })
    if (result.state == 200) {
      if (result.data.price > 0) {
        item.netPrice = result.data.price
      }
    } else if (result.message == '操作频繁') {
      item.netPrice = 0
    }
    // 想把哪个 渠道默认选中主渠道 就需要 将这个id 判断一下 添加进当前的数组   主渠道 需要添加数组第一个 备渠道需要添加进数组第二个   当前的代码是默认添加了一个主渠道
    if (item.id == 88) {
      selectedChannelList.value.push(item)
    }

    // if (item.id == 11) {
    //   selectedChannelList.value.push(item)
    // }
  } catch (err) {
    performTask(item, id)
  }
}

// 获取当前选中的渠道
const getSelectedChannel = (e: any) => {
  selectedChannelList.value = e // 当前选择的值
  console.log('selectedChannelList=', selectedChannelList.value)

  // 判断当前的是否限价开关 禁用 和 关闭 判断
  checked.value = selectedChannelList.value.some(item => item.isSupport == 1)
  disabled.value = selectedChannelList.value.every(item => item.isSupport == 0)
  console.log('disabled.value=', disabled.value)
}

// 支付出票弹框 - 确定按钮
const handleOk = async () => {
  confirmLoading.value = true
  if (selectedChannelList.value.length < 1) {
    // message.warning('主备渠道必须选择~')
    message.warning('请选择渠道~')
    confirmLoading.value = false
    return
  }

  let params = {
    taskId: itemInfo.value.id,
    matchChannel: selectedChannelList.value[0].id,
    enableLimitPrice: checked.value ? 1 : 0,
  }

  if (selectedChannelList.value.length == 2) {
    params.slaveMatchChannel = selectedChannelList.value[1].id
  } else {
    params.slaveMatchChannel = 0
  }

  try {
    const res = await accountApi.getChuPia(params)
    if (res.state === 200) {
      message.success('支付出票成功~')
      confirmLoading.value = false
      open.value = false
    } else {
      message.error(res.message)
      confirmLoading.value = false
    }
  } catch {
    confirmLoading.value = false
  }
}

// ---------------------------------------------------------------------------------------

// 查询
const search = () => {
  pagination.value.current = 1
  searchParams.value.currentPage = 1
  formRef.value.validate().then(() => {
    searchParams.value.cinemaName = formState.cinemaName || ''
    searchParams.value.fansId = formState.fansId || ''
    searchParams.value.orderStatus = formState.orderStatus || ''
    searchParams.value.channel = formState.channel || ''
    searchParams.value.upstreamOrderNumber = formState.upstreamOrderNumber || ''
    searchParams.value.orderNumber = formState.orderNumber || ''
    searchParams.value.profitState = formState.profitState

    getList()
  })
}

// 重置
const reset = () => {
  pagination.value.current = 1
  searchParams.value.currentPage = 1
  formRef.value.resetFields()

  formRef.value.resetFields()
  for (let key in searchParams.value) {
    if (key != 'currentPage' && key != 'pageSize' && key != 'robotId')
      searchParams.value.hasOwnProperty(key) && delete searchParams.value[key]
  }

  getList()
}

// 尝试拦截
const intercept = async (id: string) => {
  try {
    let { state, message: msg } = await orderApi.orderIntercept({ id })
    if (state === 200) {
      message.success(
        '已向渠道提交拦截，但是不保证拦截成功，请您留意下订单状态。（不要先行给买家退款以免造成损失）',
      )
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络请求连接失败~')
  }
}

const orderDetailModelRef = ref()
const imgViewRef = ref()

const PreviewModal = (list: any) => {
  imgViewRef.value.showModal(list)
}
const orderDetailModelRefOpen = (record: any) => {
  orderDetailModelRef.value.showModal(record)
}

// 导出表格
let exportExcelLoading = ref<boolean>(false)
let exportExcelLoadingFlag = ref<boolean>(false)
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN'
import 'dayjs/locale/zh-cn'
// 将选择范围控制在7天
import type { Moment } from 'moment'
const dates = ref<Moment[]>([])
const disabledDate = (current: Moment) => {
  if (!dates.value || dates.value.length === 0) {
    return false
  }
  const diffDate = current.diff(dates.value[0], 'days')
  return Math.abs(diffDate) > 30
}
const onCalendarChange = (val: Moment[]) => {
  dates.value = val
}
type RangeValue = [Dayjs, Dayjs] | [string, string] | undefined
let startTime = ref<string>()
let endTime = ref<string>()
const changeTime = (e: RangeValue | [string, string], dataString: [string, string]) => {
  console.log(dataString)
  // startTime.value = dataString[0]
  // endTime.value = dataString[1]
  startTime.value = new Date(dataString[0] + ' 00:00:00').getTime().toString()
  endTime.value = new Date(dataString[1] + ' 23:59:59').getTime().toString()

  console.log(startTime.value, endTime.value, 'endTimeendTime')
}

const exportExcel = async () => {
  console.log(startTime.value, endTime.value, 'startTime.value,endTime.value')
  if (!startTime.value || !endTime.value) {
    message.warning('请选择完整的时间范围~')

    return
  }
  searchParams.value.startTime = startTime.value
  searchParams.value.endTime = endTime.value
  try {
    exportExcelLoading.value = true
    exportExcelLoadingFlag.value = true

    let { state, data, message: msg } = await orderApi.filmOrderExcelOut(searchParams.value)
    // console.log('data=', data)
    let blob = new Blob([data], {
      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
    })
    let file = new File([blob], `订单-${getNowDay()}.xlsx`, {
      lastModified: new Date() as any,
      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
    })
    // console.log('file=', file)
    const a = document.createElement('a')
    a.style.display = 'none'
    document.body.appendChild(a)
    const url = URL.createObjectURL(file)
    a.href = url
    a.download = file.name
    a.click()
  } catch (error) {
    message.error('网络请求连接失败~')
  }
  exportExcelLoading.value = false
  setTimeout(() => {
    exportExcelLoadingFlag.value = false
  }, 10000)
}

const advancedSearch = () => {
  searchDrawerRef.value.showDrawer()
}
</script>

<template>
  <page-container :title="route.meta.title">
    <a-card style="overflow-x: scroll">
      <div class="searchBox">
        <a-form ref="formRef" layout="inline" :model="formState" class="formClass">
          <a-form-item label="平台单号" name="orderNumber">
            <a-input v-model:value="formState.orderNumber" placeholder="平台单号" style="width: 200px" />
          </a-form-item>

          <a-form-item label="渠道单号" name="upstreamOrderNumber">
            <a-input v-model:value="formState.upstreamOrderNumber" placeholder="渠道单号" style="width: 200px" />
          </a-form-item>

          <a-form-item label="影院名称" name="cinemaName">
            <a-input v-model:value="formState.cinemaName" placeholder="影院名称" style="width: 200px" />
          </a-form-item>

          <!-- start -->
          <!-- <a-form-item label="粉丝ID" name="fansId" v-show="searchFlag">
            <a-input v-model:value="formState.fansId" placeholder="粉丝ID" />
          </a-form-item> -->

          <SearchDrawer ref="searchDrawerRef">
            <div>
              <a-form-item label="平台单号" name="orderNumber">
                <a-input v-model:value="formState.orderNumber" placeholder="平台单号" style="width: 250px" />
              </a-form-item>

              <a-form-item label="渠道单号" name="upstreamOrderNumber">
                <a-input v-model:value="formState.upstreamOrderNumber" placeholder="渠道单号" style="width: 250px" />
              </a-form-item>

              <a-form-item label="影院名称" name="cinemaName">
                <a-input v-model:value="formState.cinemaName" placeholder="影院名称" style="width: 250px" />
              </a-form-item>

              <a-form-item label="订单状态" name="orderStatus">
                <a-select v-model:value="formState.orderStatus" placeholder="订单状态" style="width: 250px" allowClear>
                  <a-select-option v-for="(item, index) in orderStatusList" :key="index" :value="item.value">
                    {{ item.label }}
                  </a-select-option>
                </a-select>
              </a-form-item>

              <a-form-item label="平台" name="channel">
                <a-select v-model:value="formState.channel" placeholder="平台" allowClear style="width: 250px">
                  <a-select-option v-for="(item, index) in channelList" :key="index" :value="item.value">
                    {{ item.label }}
                  </a-select-option>
                </a-select>
              </a-form-item>

              <a-form-item label="利润状态" name="profitState">
                <a-select v-model:value="formState.profitState" placeholder="利润状态" allowClear style="width: 250px">
                  <a-select-option v-for="(item, index) in profitStateList" :key="index" :value="item.value">
                    {{ item.label }}
                  </a-select-option>
                </a-select>
              </a-form-item>



              <a-form-item style="text-align: right">
                <a-button type="primary" @click="search">搜索</a-button>
                <a-button @click="reset" style="margin-left: 10px">重置</a-button>
              </a-form-item>
            </div>
          </SearchDrawer>

          <a-form-item label="时间导出" name="time">
            <a-range-picker v-model:value="formState.time" :disabledDate="disabledDate"
              @calendarChange="onCalendarChange" :locale="locale" :placeholder="['开始日期', '结束日期']" @change="changeTime"
              style="height: 32px; line-height: 32px; width: 250px" />
          </a-form-item>
          <!-- end -->
          <a-form-item>
            <a-button type="primary" @click="search">搜索</a-button>
            <a-button @click="reset">重置</a-button>
            <a-button type="primary" @click="advancedSearch">高级搜索</a-button>
            <a-button :loading="exportExcelLoading" :disabled="exportExcelLoadingFlag" @click="exportExcel">
              <template #icon>
                <VerticalAlignBottomOutlined />
              </template>
              导出
            </a-button>
          </a-form-item>
        </a-form>
      </div>

      <a-alert description="小提示：只要鼠标在表格上，按住左Shift键并滚动鼠标滚轮就可以横向滚动表格" type="info" banner
        style="margin-bottom: 10px; padding: 10px" />

      <a-table style="overflow-x: scroll" :columns="columns" :data-source="dataSource" :pagination="pagination"
        :loading="loading" @change="changePage" rowKey="id" :scroll="{ x: 100 }" size="small">
        <template #emptyText>
          <a-empty description="暂无数据" />
        </template>

        <template #headerCell="{ column }">
          <template v-if="column.key === 'id'">
            <span>id</span>
          </template>
        </template>

        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'cinemaInfo'">
            <a-descriptions bordered size="small" :column="1" :labelStyle="{ width: '100px' }">
              <a-descriptions-item label="影院名称">
                <a-tooltip placement="top">
                  <template #title>
                    <span>{{ record.cinemaName }}</span>
                  </template>
                  <span class="hiddenText">{{ record.cinemaName }}</span>
                </a-tooltip>
              </a-descriptions-item>
              <a-descriptions-item label="院线">{{ record.lineName || '-' }}</a-descriptions-item>
              <a-descriptions-item label="城市">{{ record.city || '-' }}</a-descriptions-item>
              <a-descriptions-item label="影院地址">
                <a-tooltip placement="top">
                  <template #title>
                    {{ record.cinemaAddress || '-' }}
                  </template>
                  <span class="hiddenText">{{ record.cinemaAddress || '-' }}</span>
                </a-tooltip>
              </a-descriptions-item>
            </a-descriptions>
          </template>

          <template v-else-if="column.key === 'filmName'">
            <a-descriptions bordered size="small" :column="1" :labelStyle="{ width: '100px' }">
              <a-descriptions-item label="影片">
                <a-tooltip placement="top">
                  <template #title>
                    {{ record.filmName || '-' }}
                  </template>
                  <span class="hiddenText">{{ record.filmName || '-' }}</span>
                </a-tooltip>
              </a-descriptions-item>
              <a-descriptions-item label="影厅">
                <a-tooltip placement="top">
                  <template #title>
                    {{ record.showName || '-' }}
                  </template>
                  <span class="hiddenText">{{ record.showName || '-' }}</span>
                </a-tooltip>
              </a-descriptions-item>
              <a-descriptions-item label="场次">
                {{ timeFormat(record.showTime) || '-' }}
              </a-descriptions-item>
              <a-descriptions-item label="座位">
                <a-tooltip placement="top">
                  <template #title>
                    <span v-if="record?.seatNos" v-for="item in record?.seatNos.split(',')" :key="item">
                      {{ item }}
                      <span v-if="item.changeStatus == 0">未换座</span>
                      <span v-if="item.changeStatus == 1">已换座</span>
                    </span>
                  </template>
                  <span class="hiddenText" style="position: relative; top: 4px">
                    <a-tag style="line-height: 16px" v-if="record?.seatNos" v-for="item in record?.seatNos.split(',')"
                      :key="item">
                      {{ item }}
                      <span v-if="item.changeStatus == 0">未换座</span>
                      <span v-if="item.changeStatus == 1">已换座</span>
                    </a-tag>
                  </span>
                </a-tooltip>
              </a-descriptions-item>
            </a-descriptions>
          </template>

          <template v-else-if="column.key === 'finalPrice'">
            <a-descriptions bordered size="small" :column="1" :labelStyle="{ width: '100px' }">
              <a-descriptions-item label="原价" v-if="record.submitPrice && record.seatCount">
                ￥{{ toYuan(record.submitPrice) || '-' }} / ￥{{
    (toYuan(record.submitPrice) * record.seatCount).toFixed(2)
  }}
              </a-descriptions-item>
              <a-descriptions-item label="原价" v-else>{{ '-' }}</a-descriptions-item>

              <a-descriptions-item label="自购价" v-if="record.imagePrice">
                ￥{{ (toYuan(record.imagePrice) / record.seatCount).toFixed(2) || '-' }} /￥{{
    toYuan(record.imagePrice)
  }}
              </a-descriptions-item>
              <a-descriptions-item label="自购价" v-else>{{ '-' }}</a-descriptions-item>

              <a-descriptions-item label="报价" v-if="record.finalPrice">
                ￥{{ toYuan(record.finalPrice) || '-' }} /￥{{
    (toYuan(record.finalPrice) * record.seatCount).toFixed(2)
  }}
              </a-descriptions-item>
              <a-descriptions-item label="报价" v-else>{{ '-' }}</a-descriptions-item>

              <a-descriptions-item label="降价" v-if="record.depreciate && record.depreciate != '0'">
                ￥{{ toYuan(record.depreciate) }}
              </a-descriptions-item>

              <a-descriptions-item label="限价" v-if="record.limitPrice">
                ￥{{ toYuan(record.limitPrice) || '-' }} /￥{{
    (toYuan(record.limitPrice) * record.seatCount).toFixed(2)
  }}
              </a-descriptions-item>
              <a-descriptions-item label="限价" v-else>{{ '-' }}</a-descriptions-item>
            </a-descriptions>
          </template>

          <template v-else-if="column.key === 'finalInformPrice'">
            <a-descriptions bordered size="small" :column="1" :labelStyle="{ width: '100px' }">
              <a-descriptions-item label="出票价" v-if="record.orderFinalPrice">
                ￥{{ toYuan(record.orderFinalPrice) || '-' }}/￥{{
    (toYuan(record.orderFinalPrice) * record.seatCount).toFixed(2)
  }}
              </a-descriptions-item>
              <a-descriptions-item label="出票价" v-else>{{ '-' }}</a-descriptions-item>

              <a-descriptions-item label="实收价" v-if="record.payPrice">
                ￥{{ (toYuan(record.payPrice) / record.seatCount).toFixed(2) || '-' }} /￥{{
    toYuan(record.payPrice)
  }}
              </a-descriptions-item>
              <a-descriptions-item label="实收价" v-else>{{ '-' }}</a-descriptions-item>

              <a-descriptions-item label="单座利润" v-if="record.profit">
                ￥{{
    record.profit
      ? (toYuan(record.profit) / record.seatCount).toFixed(2)
      : '0.00' || '-'
  }}
              </a-descriptions-item>
              <a-descriptions-item label="单座利润" v-else>{{ '-' }}</a-descriptions-item>

              <a-descriptions-item label="整单利润">
                <span v-if="record.profit > 0" style="color: #1890ff">
                  ￥{{ toYuan(record.profit) }}
                </span>
                <span v-else-if="record.profit < 0" style="color: red">
                  ￥{{ toYuan(record.profit) }}
                </span>
                <span v-else>￥{{ toYuan(record.profit) }}</span>
              </a-descriptions-item>
            </a-descriptions>
          </template>

          <template v-else-if="column.key === 'channelData'">
            <a-descriptions bordered size="small" :column="1" :labelStyle="{ width: '100px' }">
              <a-descriptions-item label="平台单号">
                {{ record.orderNumber }}
                <a @click="copyToCliboard(record.orderNumber)">
                  <CopyOutlined />
                </a>
              </a-descriptions-item>
              <a-descriptions-item label="渠道单号">
                {{ record.upstreamOrderNumber || '-' }}
                <a v-if="record.upstreamOrderNumber != ''" @click="copyToCliboard(record.upstreamOrderNumber)">
                  <CopyOutlined />
                </a>
              </a-descriptions-item>
              <a-descriptions-item label="出票渠道">
                <a-tag v-if="record.matchChannel == 3" color="blue">麻花电影票（可限价）</a-tag>
                <a-tag v-if="record.matchChannel == 5" color="blue">芒果电影票（一口价）</a-tag>
                <a-tag v-if="record.matchChannel == 66" color="blue">芒果一口价</a-tag>
                <a-tag v-if="record.matchChannel == 88" color="blue">芒果电影票</a-tag>
                <a-tag v-if="record.matchChannel == 6" color="blue">哈哈电影票</a-tag>
                <a-tag v-if="record.matchChannel == 11" color="blue">守兔电影票（一口价）</a-tag>
                <a-tag v-if="record.matchChannel == 7" color="blue">守兔电影票（可限价）</a-tag>
                <a-tag v-if="record.matchChannel == 9" color="blue">哈哈电影快票（固定9折）</a-tag>
                <a-tag v-if="record.matchChannel == 8" color="blue">星驰电影票（一口价）</a-tag>
                <a-tag v-if="record.matchChannel == 10" color="blue">影划算电影票（可限价）</a-tag>
                <a-tag v-if="record.matchChannel == 101" color="blue">渠道预估价</a-tag>
                <a-tag v-if="record.matchChannel == 102" color="blue">渠道一口价</a-tag>
                <a-tag v-if="record.matchChannel == 103" color="blue">场景预估价</a-tag>

                <a-tag v-if="record.matchChannel == 100" color="blue">自行出票</a-tag>

                <a-tooltip placement="topLeft" :title="record.masterReason" v-if="record.masterReason != ''">
                  <a style="margin-right: 10px"><question-circle-outlined style="color: red" /></a>
                </a-tooltip>

                <a-tag v-if="record.slaveMatchChannel == 3" color="blue">
                  麻花电影票（可限价）
                </a-tag>
                <a-tag v-if="record.slaveMatchChannel == 66" color="blue">芒果一口价</a-tag>
                <a-tag v-if="record.slaveMatchChannel == 88" color="blue">芒果电影票</a-tag>

                <a-tag v-if="record.slaveMatchChannel == 5" color="blue">
                  芒果电影票（一口价）
                </a-tag>
                <a-tag v-if="record.slaveMatchChannel == 6" color="blue">哈哈电影票</a-tag>
                <a-tag v-if="record.slaveMatchChannel == 11" color="blue">
                  守兔电影票（一口价）
                </a-tag>
                <a-tag v-if="record.slaveMatchChannel == 7" color="blue">
                  守兔电影票（可限价）
                </a-tag>
                <a-tag v-if="record.slaveMatchChannel == 9" color="blue">
                  哈哈电影快票（固定9折）
                </a-tag>
                <a-tag v-if="record.slaveMatchChannel == 8" color="blue">
                  星驰电影票（一口价）
                </a-tag>
                <a-tag v-if="record.slaveMatchChannel == 10" color="blue">
                  影划算电影票（可限价）
                </a-tag>
                <a-tag v-if="record.slaveMatchChannel == 0 &&
    record.orderStatus >= 3 &&
    record.matchChannel != 101 &&
    record.matchChannel != 102
    " color="blue">
                  不使用
                </a-tag>

                <a-tooltip placement="topLeft" :title="record.slaveReason" v-if="record.slaveReason != ''">
                  <a style="margin-right: 10px"><question-circle-outlined style="color: red" /></a>
                </a-tooltip>

                <div v-if="record.matchChannel == 0">-</div>
              </a-descriptions-item>
              <a-descriptions-item label="限价模式">
                <!-- <a-tag v-if="record.matchChannel == 3 || record.matchChannel == 5" color="blue">
                  支持限价
                </a-tag>
                <a-tag v-if="record.matchChannel == 6 || record.matchChannel == 7" color="blue">
                  不支持限价
                </a-tag>
                <div v-if="record.matchChannel == 0">-</div> -->
                <a-tag v-if="record.limitPriceState == 1" color="blue">已限价</a-tag>
                <a-tag v-if="record.limitPriceState == 2" color="blue">未限价</a-tag>
                <a-tag v-if="record.limitPriceState == 0" color="red">未知</a-tag>
              </a-descriptions-item>
            </a-descriptions>
          </template>

          <template v-else-if="column.key === 'planetForm'">
            <div>
              <a-descriptions bordered size="small" :column="1" :labelStyle="{ width: '100px' }">
                <a-descriptions-item label="推广平台">
                  {{ getChannel(record.channel) || '-' }}
                </a-descriptions-item>
                <a-descriptions-item label="平台账号">
                  {{ record.robotNickName || '-' }}
                </a-descriptions-item>
                <a-descriptions-item label="出票模式">
                  <a-tag v-if="record.orderPattern == 0" color="blue">人工创建</a-tag>
                  <a-tag v-if="record.orderPattern == 1" color="blue">手动模式</a-tag>
                  <a-tag v-if="record.orderPattern == 2" color="blue">自动模式</a-tag>
                </a-descriptions-item>
                <a-descriptions-item label="账号编号">
                  {{ record.robotId || '-' }}
                </a-descriptions-item>
              </a-descriptions>
            </div>
          </template>

          <template v-else-if="column.key === 'orderStatus'">
            <a-descriptions bordered size="small" :column="1" :labelStyle="{ width: '100px' }">
              <a-descriptions-item label="粉丝支付">
                <div v-if="getChannel(record.channel) == '闲鱼'">
                  <a-tag color="green">请在app处理查看</a-tag>
                </div>
                <div v-else>
                  <a-tag v-if="record.payStatus == -1" color="red">已退款</a-tag>
                  <a-tag v-if="record.payStatus == 0" color="red">未支付</a-tag>
                  <a-tag v-if="record.payStatus == 1" color="green">已支付</a-tag>
                </div>
              </a-descriptions-item>
              <a-descriptions-item label="平台支付">
                <a-tag v-if="record.userPayStatus == -1" color="red">已退款</a-tag>
                <a-tag v-if="record.userPayStatus == 0" color="red">未支付</a-tag>
                <a-tag v-if="record.userPayStatus == 1" color="green">已支付</a-tag>
              </a-descriptions-item>
              <a-descriptions-item label="出票状态">
                <a-tag v-if="record.orderStatus == 2" color="blue">已提交</a-tag>
                <a-tag v-if="record.orderStatus == 1" color="blue">已创建</a-tag>
                <a-tag v-if="record.orderStatus == 3" color="blue">出票中</a-tag>
                <a-tag v-if="record.orderStatus == 10" color="green">出票成功</a-tag>
                <a-tag v-if="record.orderStatus == 20" color="red">出票失败</a-tag>
                <a-tag v-if="record.orderStatus == 25" color="red">订单售后</a-tag>
                <a-tag v-if="record.orderStatus == 15" color="blue">已结算</a-tag>
                <a-tooltip placement="topLeft" :title="record.failReason" v-if="record.orderStatus == 20">
                  <a><question-circle-outlined style="color: red" /></a>
                </a-tooltip>
              </a-descriptions-item>

              <a-descriptions-item label="允许换座">
                <a-tag color="blue">九宫格换座</a-tag>
              </a-descriptions-item>
            </a-descriptions>
          </template>

          <template v-else-if="column.key === 'action'">
            <div>
              <a @click="orderDetailModelRefOpen(record)">订单详情</a>
            </div>
            <div>
              <a v-if="record.orderStatus == 3" @click="intercept(record.orderId)">尝试拦截</a>
              <a v-else style="color: rgb(186, 186, 186)">尝试拦截</a>
            </div>
            <div>
              <a style="color: rgb(186, 186, 186)">催促出票</a>
            </div>
            <div>
              <a v-if="record.payStatus == 1 &&
    record.outTicketState == 1 &&
    record.identifyState == 1 &&
    record.orderStatus == 2
    " @click="getDraw(record)">
                支付出票
              </a>

              <a v-else style="color: rgb(186, 186, 186)">支付出票</a>
            </div>
          </template>

          <template v-else-if="column.key === 'createTime'">
            <a-descriptions bordered size="small" :column="1" :labelStyle="{ width: '100px' }">
              <a-descriptions-item label="创建时间">
                {{ timeFormat_2(record.createTime) }}
              </a-descriptions-item>

              <a-descriptions-item label="提交时间">
                {{ timeFormat_2(record.upstreamTime) }}
              </a-descriptions-item>

              <a-descriptions-item label="出票时间">
                {{ timeFormat_2(record.upstreamCallbackTime) }}
              </a-descriptions-item>

              <a-descriptions-item label="退款时间" v-if="record.orderStatus == 25">
                {{ timeFormat_2(record.refundTime) }}
              </a-descriptions-item>

              <a-descriptions-item label="结算时间" v-else>
                {{ timeFormat_2(record.settleTime) }}
              </a-descriptions-item>
            </a-descriptions>
          </template>
        </template>
      </a-table>
    </a-card>

    <orderModal ref="orderDetailModelRef" @refresh="getList" @ImagePreview="PreviewModal" :width="1000"></orderModal>

    <ImgView ref="imgViewRef" :width="1000"></ImgView>

    <!-- 支付出票 - 弹框 -->
    <a-modal v-model:open="open" centered title="支付出票" @ok="handleOk" @cancel="cancel" :width="1100"
      :maskClosable="false" :confirmLoading="confirmLoading">
      <div class="pay-modal">
        <div class="imgUrl">
          <a-image :width="200" :src="itemInfo?.imgUrl" />
        </div>

        <div class="info-data">
          <a-descriptions bordered size="middle" :column="1" :span="8">
            <a-descriptions-item label="城市">{{ itemInfo.city || '-' }}</a-descriptions-item>
            <a-descriptions-item label="院线">{{ itemInfo.lineName || '-' }}</a-descriptions-item>
            <a-descriptions-item label="影院名称">
              <a-tooltip placement="top">
                <template #title>
                  <span>{{ itemInfo.cinemaName }}</span>
                </template>
                <span class="hiddenText">{{ itemInfo.cinemaName }}</span>
              </a-tooltip>
            </a-descriptions-item>
            <a-descriptions-item label="影院地址">
              <a-tooltip placement="top">
                <template #title>
                  {{ itemInfo.cinemaAddress || '-' }}
                </template>
                <span class="hiddenText">{{ itemInfo.cinemaAddress || '-' }}</span>
              </a-tooltip>
            </a-descriptions-item>
            <a-descriptions-item label="影片">
              <a-tooltip placement="top">
                <template #title>
                  {{ itemInfo.filmName || '-' }}
                </template>
                <span class="hiddenText">{{ itemInfo.filmName || '-' }}</span>
              </a-tooltip>
            </a-descriptions-item>
            <a-descriptions-item label="影厅">
              <a-tooltip placement="top">
                <template #title>
                  {{ itemInfo.showName || '-' }}
                </template>
                <span class="hiddenText">{{ itemInfo.showName || '-' }}</span>
              </a-tooltip>
            </a-descriptions-item>
            <a-descriptions-item label="放映时间">
              {{ timeFormat(itemInfo.showTime) || '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="座位">
              <a-tooltip placement="top">
                <template #title>
                  <span v-if="itemInfo?.seatNos" v-for="item in itemInfo?.seatNos.split(',')" :key="item">
                    {{ item }}
                    <span v-if="item.changeStatus == 0">未换座</span>
                    <span v-if="item.changeStatus == 1">已换座</span>
                  </span>
                </template>
                <span class="hiddenText" style="position: relative; top: 4px">
                  <a-tag style="line-height: 16px" v-if="itemInfo?.seatNos" v-for="item in itemInfo?.seatNos.split(',')"
                    :key="item">
                    {{ item }}
                    <span v-if="item.changeStatus == 0">未换座</span>
                    <span v-if="item.changeStatus == 1">已换座</span>
                  </a-tag>
                </span>
              </a-tooltip>
            </a-descriptions-item>
          </a-descriptions>
        </div>

        <div class="channel-box">
          <Channel :tabList="chanelList" :selectedChannelList="selectedChannelList"
            @onSelectedChannel="getSelectedChannel">
          </Channel>

          <div class="limit-box">
            <div class="left">
              <span class="title">是否限价</span>
              <span class="value" style="">(当前限价： {{ itemInfo?.limitPrice / 100 }} / 座)</span>
            </div>
            <div class="right">
              <a-switch v-model:checked="checked" :disabled="disabled" />
            </div>
          </div>
        </div>
      </div>
    </a-modal>
    <!-- 支付出票 - 弹框 -->
  </page-container>
</template>

<style lang="less" scoped>
.hiddenText {
  display: inline-block;
  width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  line-height: 16px;
}

//支付出票弹框的样式
.pay-modal {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;

  .info-data {
    // width: 445px;
    padding: 4px 20px;
    // background-color: aqua;
    height: 395px;
  }

  .channel-box {
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  .limit-box {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin: 15px 0;
    padding-left: 12px;

    .left {
      .title {
        font-size: 14px;
        font-weight: bold;
        margin-left: 5px;
      }

      .value {
        margin-left: 15px;
        font-size: 14px;
        font-weight: bold;
        color: #ed1a23;
      }
    }
  }
}

.tan-He {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;

  .tan-Header {
    width: 100%;
    margin: 10px 10px;
    padding-bottom: 8px;
    border-bottom: 1.5px solid #f5f5f5;
    font-weight: bold;
    font-size: 14px;
  }
}

.aTag-seatNo:nth-child(n + 2) {
  margin-top: 3px;
}

.formClass {
  :nth-child(1) {
    margin-bottom: 2px;
  }
}

.searchBox {
  margin-bottom: 10px;
  display: flex;

  input {
    width: 200px;
    margin-right: 10px;
  }

  button {
    margin-right: 10px;
  }
}

a:hover {
  color: red;
}

.imgBox {
  width: 50px;
  height: 50px;

  img {
    height: 50px;
  }
}

.popoverImg {
  width: 300px;

  img {
    width: 100%;
  }
}

.robitStatusClass {
  text-align: center;
}

:deep(.ant-form-item-label) {
  width: 70px;
}
</style>
